<script setup lang="ts">
import { getAllSheet, getPlayListAllMusic } from "@/api/content";
import { formatDate } from "@/utils/util";
import { ref, onMounted } from "vue-demi";
import MusicItem from "@/components/MusicItem/index.vue";

const list = ref<any[]>([]);

onMounted(async () => {
  // 获取所有歌单
  const res = await getAllSheet();
  const findHotMusicItem = res.list.find((t: any) => t.name === "热歌榜");
  // 获取歌单所有歌曲
  const { songs } = await getPlayListAllMusic({
    id: findHotMusicItem.id,
    limit: 20,
  });
  list.value = songs.map((t: any) => ({
    ...t,
    alName: t.al.name,
  }));
});
</script>

<template>
  <div class="hot-container">
    <div class="hot-wrapper">
      <div class="hot-content">
        <div class="hot-bg sprt"></div>
        <div class="hot-time">更新日期: {{ formatDate("MM月DD日") }}</div>
      </div>
    </div>
    <MusicItem :list="list" :index="3"></MusicItem>
  </div>
</template>

<style lang="scss" scoped>
.hot-wrapper {
  position: relative;
  padding-top: 36%;
  overflow: hidden;
  background: url("@/assets/images/hot_music_bg.jpg");
  background-size: cover;

  // @apply relative
  //       pt-1/3
  //       overflow-hidden
  //       bg-[url('@/assets/images/hot_music_bg.jpg')]
  //       bg-cover;
}

.hot-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding-left: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;

  // @apply   absolute top-0  right-0  bottom-0 left-0 z-10 pl-5 flex  flex-col justify-center

  .hot-bg {
    width: 284px;
    height: 134px;
    background-position: -48px -60px;
  }

  .hot-time {
    margin-top: 20px;
    font-size: 24px;
    color: #fff;
  }
}
</style>
